<template>
  <div :class="{'arrow_box':false,'equipment-item-box':true}">
    <div class="display-flex justify-content-flex-justify">
      <el-image
        style="width: 100px; height: 100px; margin-right: 10px"
        :src="item.imageUrl"
        fit="fill"
      ></el-image>
      <div style="line-height:23px">
        <div style="color:#666;font-weight:bold">设备名称：{{ item.equipmentName }}</div>
        <div>增材方式：{{ item.materialAddMethodName }}</div>
        <div>设备状态：{{ setStatus(parseInt(item.equipmentType)) }}</div>
      </div>
      <div>
        <el-link type="primary" @click="toInfo()">设备信息</el-link>
        <!-- <el-button type="primary" plain size="mini">设备信息</el-button> -->
      </div>
    </div>
    <div class="display-flex align-items-center justify-content-flex-justify" style="line-height:23px">
      <div>
        <div>当前任务：{{item.taskName}}</div>
        <div class="">
          加工进度：
          {{item.currentLayerFinished}}/{{item.detail}}
        </div>
        <div>&nbsp;&nbsp;排队任务：{{item.taskQuantity}}</div>
        <div @click="toWarning()">报警数量：<img class="waning-img" src="@/assets/images/warning.png" alt="" srcset=""><span class="warning-num">10</span></div>
      </div>
      <el-progress
        type="dashboard"
         :color="colors"
         :stroke-width="12"
         stroke-linecap="round"
        :percentage="parseFloat(item.productionStatus)"
      ></el-progress>
    </div>
  </div>
</template>

<script>
export default {
  props: ["item", "statusOptions"],
  data() {
    return {
      list: [],
       colors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ]
    };
  },
  methods: {
    setStatus(status) {
      return this.selectDictLabel(this.statusOptions, status);
    },
    toInfo() {
      this.$router.push({
        path: "equipment/info",
        query: {
          equipmentName: this.item.equipmentName,
          equipmentId: this.item.equipmentId,
        },
      });
    },
    toWorking() {
      this.$router.push({
        path: "technology/technology",
        query: {
          equipmentName: this.item.equipmentName,
          equipmentId: this.item.equipmentId,
        },
      });
    },
    toTask() {
      this.$emit("task", this.item.equipmentId);
    },
    toWarning(){
       this.$router.push({
        path: "equipment/alarmData",
        query: {
          equipmentId: this.item.equipmentId,
        },
      });
    },
  },
};
</script>

<style  scoped>
.equipment-item-box {
  width: 100%;

  padding: 10px;
  margin-bottom: 40px;
  border-radius: 4px;
  box-shadow: 0 0 9px 2px #aaa;
  font-size: 14px;
}
.item-q /deep/ .el-progress-bar {
  background: #aaa;
}
.arrow_box{animation: glow 500ms ease-out infinite alternate; }
@keyframes glow {
    0% {
        /* border-color: #393; */
        box-shadow: 0 0 5px rgba(255,0,0,.2), inset 0 0 5px rgba(255,0,0,.1), 0 0px 0 #393;
    }
    100% {
        /* border-color: #6f6; */
        box-shadow: 0 0 20px rgba(255,0,0,.6), inset 0 0 10px rgba(255,0,0,.4), 0 0px 0 #6f6;
    }
}
 @-webkit-keyframes scaleout {
    0% { -webkit-transform: scale(1.0) }
    100% {
      -webkit-transform: scale(1.1);
      opacity: 0;
    }
  }
  @keyframes scaleout {
    0% {
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
    } 100% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        opacity: 0.3;
      }
  }

.warning-num{
  color:#ce642e;
  margin-left:3px;
  font-weight: bold;
}
.waning-img{
  width:18px;
  position: relative;
  top:2px;
  /* -webkit-animation: scaleout 0.8s infinite ease-in-out;
  animation: scaleout 0.8s infinite ease-in-out; */
}
</style>